/*
 * @Author: your name
 * @Date: 2021-08-26 21:47:58
 * @LastEditTime: 2021-11-20 20:58:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\setting\theme.ts
 */

// 最后需要将所有默认配置 封装

import { computed, unref, ref } from 'vue'
import { colorConfig } from './themeConfig'
import { useMassage, SetLocalStrong,GetLocalStrong } from '../ntils/hooks'

import i18n from './locales/setlocales'

const { t } = i18n.global

let { createMessage } = useMassage()
export const modevalue = ref<Boolean>(false);
export const updataMode = ()=>{
       return computed(()=>unref(mode.value))
}

// 更换模式
export const onChangeMode = (mode=false)=>{
    SetLocalStrong({ key: 'APP_MODE', value: mode?'dark':'light' })
    let link = document.querySelector('#dataTheme');
    let themePath = import.meta.env.VITE_ENV=='development'?'/color.dark.css':'/Elk-Admin/color.dark.css';
    link?.setAttribute('href',mode?themePath:'#');
    let htmls = document.querySelector('html');
    htmls?.setAttribute('data-theme',mode?'dark':'light');
    modevalue.value = mode;
}

// 默认主题
export var ColorArr = ref('jinghong')
// 设置主题+获取主题状态
export function SetTheme():Object {
// 利用computed堆属性的监听性 + unref响应数据造成全局响应变量
// 利用此机制可以动态编辑页面 + 更改主题等操作
    const themeColors = computed(() => unref(ColorArr))
    return {
        themeColors,
    }
}
// 切换主题+保留状态
export function updateTheme(color) {
    // 更改 header 以及其他颜色
    ColorArr.value = color
    window.less
    .modifyVars({
        ...colorConfig[color],
    })
    .then(() => {
        SetLocalStrong({ key: 'APP_THEME_LOCAL', value: color })
        createMessage.success(`${t('Modal.theme')} ${color}`)
    })
    .catch(error => {
        console.log(error)
        createMessage.error(`${t('Modal.themeError')}`)
    })
}
